<template>
  <div class="profile">
    <div class="account-settings-info-title">
      <span data-v-26b608e6="">安全设置</span>
    </div>
    <div class="">
      <div class="ant-list ant-list-split">
        <div class="ant-spin-nested-loading">
          <div class="ant-spin-container">
            <div class="ant-list-item">
              <div class="ant-list-item-meta">
                <div class="ant-list-item-meta-content">
                  <h4 class="ant-list-item-meta-title">
                    <a>账户密码</a>
                  </h4>
                  <div class="ant-list-item-meta-description">
                    <span>
                      <span class="security-list-description">当前密码强度</span>
                      <span> : </span>
                      <span class="security-list-value">中</span>
                    </span>
                  </div>
                </div>
              </div>
              <ul class="ant-list-item-action">
                <li><a @click.prevent="handlePasswdPopup">修改</a></li>
              </ul>
            </div>
            <div class="ant-list-item">
              <div class="ant-list-item-meta">
                <div class="ant-list-item-meta-content">
                  <h4 class="ant-list-item-meta-title">
                    <a>密保手机</a>
                  </h4>
                  <div class="ant-list-item-meta-description">
                    <span>
                      <span class="security-list-description">已绑定手机</span>
                      <span> : </span>
                      <span class="security-list-value">{{ userInfo.phone || '未填写' }}</span>
                    </span>
                  </div>
                </div>
              </div>
              <ul class="ant-list-item-action">
                <li><a @click.prevent="handlePhonePopup">修改</a></li>
              </ul>
            </div>
            <div class="ant-list-item">
              <div class="ant-list-item-meta">
                <div class="ant-list-item-meta-content">
                  <h4 class="ant-list-item-meta-title">
                    <a>邮箱</a>
                  </h4>
                  <div class="ant-list-item-meta-description">
                    <span>
                      <span class="security-list-description">用于找回密码等其他安全验证操作, 已绑定邮箱</span>
                      <span> : </span>
                      <span class="security-list-value">{{ userInfo.email || '未填写' }}</span>
                    </span>
                  </div>
                </div>
              </div>
              <ul class="ant-list-item-action">
                <li><a @click.prevent="handleEmailPopup">修改</a></li>
              </ul>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!--    相关弹出修改对话框-->
    <el-dialog
      :visible.sync="passwdBox"
      width="45%"
      append-to-body
    >
      <div slot="title" class="ant-modal-title">
        修改密码<el-divider />
      </div>
      <avue-form ref="passwdForm" v-model="passwdForm" :option="passwdOptions" @submit="handlePasswdSubmit" />
    </el-dialog>
    <el-dialog
      :visible.sync="phoneBox"
      width="45%"
      append-to-body
    >
      <div slot="title" class="ant-modal-title">
        绑定手机号码<el-divider />
      </div>
      <avue-form ref="phoneForm" v-model="phoneForm" :option="phoneOptions" @submit="handlePhoneSubmit" />
    </el-dialog>
    <el-dialog
      :visible.sync="emailBox"
      width="45%"
      append-to-body
    >
      <div slot="title" class="ant-modal-title">
        绑定邮箱<el-divider />
      </div>
      <avue-form ref="emailForm" v-model="emailForm" :option="emailOptions" @submit="handleEmailSubmit" />
    </el-dialog>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import { isEmail, isMobile } from '@/util/ValidateUtil'
import encrypt from '@/util/EncryptUtil'

const userUpdateAction = 'sys/user/updateUser'
const updateUserInfoAction = 'sys/user/updateUserInfo'
const forgetPasswdAction = 'sys/user/getForgetSMS'
const logoutAction = 'sys/user/logout'

export default {
  name: 'Security',
  data () {
    const validateEmail = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请输入邮箱!'))
      } else if (!isEmail(value)) {
        callback(new Error('输入的邮箱非法!'))
      } else {
        callback()
      }
    }
    const validatePasswd = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请输入密码!'))
      } else if (value.length < 6) {
        callback(new Error('密码长度最少6个字符!'))
      } else {
        callback()
      }
    }
    const validatePasswd2 = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请再次输入密码!'))
      } else if (value !== this.passwdForm.passwd) {
        callback(new Error('两次输入密码不一致!'))
      } else {
        callback()
      }
    }
    return {
      passwdBox: false,
      phoneBox: false,
      emailBox: false,
      passwdForm: {},
      passwdOptions: {
        emptyBtn: false,
        column: [
          {
            label: '密码',
            prop: 'passwd',
            type: 'password',
            span: 24,
            rules: [{
              validator: validatePasswd,
              trigger: 'blur'
            }]
          },
          {
            label: '确认密码',
            prop: 'passwd2',
            type: 'password',
            span: 24,
            rules: [{
              validator: validatePasswd2,
              trigger: 'blur'
            }]
          }
        ]
      },
      phoneForm: {},
      phoneOptions: {
        emptyBtn: false,
        column: [
          {
            label: '手机号码',
            labelWidth: 120,
            prop: 'phone',
            span: 24,
            rules: [{
              min: 11,
              max: 11,
              trigger: 'blur'
            }]
          },
          {
            label: '手机验证码',
            labelWidth: 120,
            prop: 'code',
            span: 24,
            append: '发送验证码',
            placeholder: '请输入正确的六位手机验证码',
            appendClick: this.sendCaptcha,
            rules: [{
              required: true,
              min: 6,
              max: 6,
              message: '请输入正确的手机验证码',
              trigger: 'blur'
            }]
          }
        ]
      },
      getCodeisWaiting: false,
      getCodeTimer: null,
      emailForm: {},
      emailOptions: {
        emptyBtn: false,
        column: [
          {
            label: '绑定邮箱',
            prop: 'email',
            span: 24,
            rules: [{
              validator: validateEmail,
              trigger: 'blur'
            }]
          }
        ]
      }
    }
  },
  computed: { ...mapGetters(['userInfo', 'token']) },
  watch: {
    phoneBox (newValue, oldValue) {
      if (!newValue) {
        this.resetTimer()
      }
    }
  },
  methods: {
    // 修改密码相关
    handlePasswdPopup () {
      this.passwdBox = true
      // 焦点聚焦
    },
    handlePasswdSubmit (form, done) {
      const postData = {
        id: this.userInfo.id,
        passwd: encrypt.md5(form.passwd),
        token: this.token
      }
      this.$store.dispatch(userUpdateAction, postData).then((res) => {
        done()
        const resCode = res.code
        const errorMsg = res.message
        if (resCode === 0) {
          this.passwdBox = false
          this.$message({
            type: 'success',
            message: '更新密码成功,请重新登录!'
          })
          this.$store.dispatch(logoutAction).then((res) => {
            this.$router.push({ name: 'login' })
          })
        } else {
          this.$message({
            type: 'error',
            showClose: true,
            message: errorMsg || '更新数据失败,请稍后再试!'
          })
        }
      }, (error) => {
        done()
        console.log(error)
      })
    },
    // 修改手机号码相关
    handlePhonePopup () {
      this.phoneBox = true
      this.phoneForm.phone = this.userInfo.phone
    },
    sendCaptcha () {
      const phoneNumber = this.phoneForm.phone
      if (this.getCodeisWaiting) {
        return
      }
      if (phoneNumber.length === 0) {
        this.$message({
          type: 'error',
          showClose: true,
          message: '手机号码不能为空!'
        })
        return
      }
      if (!isMobile(phoneNumber)) {
        this.$message({
          type: 'error',
          showClose: true,
          message: '手机号格式错误,请输入合法的11位手机号码!'
        })
        return
      }
      this.phoneOptions.column[1].append = '发送中...'
      this.getCodeisWaiting = true

      this.$store.dispatch(forgetPasswdAction, phoneNumber).then((res) => {
        const resCode = res.code
        const errorMsg = res.message
        if (resCode === 0) {
          // 发送成功
          this.$message.success('短信验证码发送成功!')
          // 设置倒计时
          this.setTimer()
        } else if (resCode === 404) {
          const errMsg = '手机号没有注册,请先注册!'
          this.$message({
            type: 'error',
            showClose: true,
            message: errMsg
          })
          this.resetTimer()
        } else if (resCode === 400) {
          const errMsg = `手机号${phoneNumber}发送短信太频繁，请60秒后再试!`
          this.$message({
            type: 'error',
            showClose: true,
            message: errMsg
          })
          this.resetTimer()
        } else {
          this.$message({
            type: 'error',
            showClose: true,
            message: errorMsg || '发送验证码异常,请稍后再试!'
          })
          this.resetTimer()
        }
      }).catch(() => {
        this.$message({
          type: 'error',
          showClose: true,
          message: '发送短信验证码失败,请稍后再试!'
        })
        this.resetTimer()
      })
    },
    setTimer () {
      let holdTime = 60
      this.phoneOptions.column[1].append = '重新获取(60)'
      this.getCodeTimer = setInterval(() => {
        if (holdTime <= 0) {
          this.getCodeisWaiting = false
          this.phoneOptions.column[1].append = '发送验证码'
          clearInterval(this.getCodeTimer)
          return
        }
        this.phoneOptions.column[1].append = '重新获取(' + holdTime + ')'
        holdTime--
      }, 1000)
    },
    resetTimer () {
      this.getCodeisWaiting = false
      this.phoneOptions.column[1].append = '发送验证码'
      if (this.getCodeTimer) {
        clearInterval(this.getCodeTimer)
      }
    },
    handlePhoneSubmit (form, done) {
      const postData = {
        id: this.userInfo.id,
        phone: form.phone,
        token: this.token
      }
      this.$store.dispatch(userUpdateAction, postData).then((res) => {
        done()
        const resCode = res.code
        const errorMsg = res.message
        if (resCode === 0) {
          this.phoneBox = false
          this.$store.dispatch(updateUserInfoAction, { phone: form.phone }).then((res) => {
            this.$message({
              type: 'success',
              message: '更新手机号码成功!'
            })
          })
        } else {
          this.$message({
            type: 'error',
            showClose: true,
            message: errorMsg || '更新数据失败,请稍后再试!'
          })
        }
      }, (error) => {
        done()
        this.$message({
          type: 'error',
          showClose: true,
          message: '更新手机号码失败,请稍后再试!'
        })
        console.log(error)
      })
    },
    // 修改邮箱相关
    handleEmailPopup () {
      this.emailBox = true
      this.emailForm.email = this.userInfo.email
    },
    handleEmailSubmit (form, done) {
      const postData = {
        id: this.userInfo.id,
        email: form.email,
        token: this.token
      }
      this.$store.dispatch(userUpdateAction, postData).then((res) => {
        done()
        const resCode = res.code
        const errorMsg = res.message
        if (resCode === 0) {
          this.emailBox = false
          this.$store.dispatch(updateUserInfoAction, { email: form.email }).then((res) => {
            this.$message({
              type: 'success',
              message: '更新邮箱成功!'
            })
          })
        } else {
          this.$message({
            type: 'error',
            showClose: true,
            message: errorMsg || '更新数据失败,请稍后再试!'
          })
        }
      }, (error) => {
        done()
        this.$message({
          type: 'error',
          showClose: true,
          message: '更新邮箱失败,请稍后再试!'
        })
        console.log(error)
      })
    }
  },
  head () {
    return {
      title: '安全设置 | 个人中心',
      meta: [
        { hid: 'description', name: 'description', content: '安全设置,个人中心' }
      ]
    }
  }
}
</script>

<style lang="scss" scoped>
  .profile {
    flex: 1 1;
    padding: 8px 40px;

    .account-settings-info-title {
      color: rgba(0, 0, 0, .85);
      font-size: 20px;
      font-weight: 500;
      line-height: 28px;
      margin-bottom: 12px;
    }

    .account-settings-info-view {
      padding-top: 12px;
    }
  }
  .ant-list {
    font-family: Chinese Quote,-apple-system,BlinkMacSystemFont,Segoe UI,PingFang SC,Hiragino Sans GB,Microsoft YaHei,Helvetica Neue,Helvetica,Arial,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol;
    font-size: 14px;
    font-variant: tabular-nums;
    line-height: 1.5;
    color: rgba(0,0,0,.65);
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    list-style: none;
    position: relative
  }

  .ant-list * {
    outline: none
  }

  .ant-list-pagination {
    margin-top: 24px;
    text-align: right
  }

  .ant-list-more {
    margin-top: 12px;
    text-align: center
  }

  .ant-list-more button {
    padding-left: 32px;
    padding-right: 32px
  }

  .ant-list-spin {
    text-align: center;
    min-height: 40px
  }

  .ant-list-empty-text {
    color: rgba(0,0,0,.45);
    font-size: 14px;
    padding: 16px;
    text-align: center
  }

  .ant-list-item {
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    padding: 12px 0
  }

  .ant-list-item,.ant-list-item-meta {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex
  }

  .ant-list-item-meta {
    -webkit-box-align: start;
    -ms-flex-align: start;
    align-items: flex-start;
    -webkit-box-flex: 1;
    -ms-flex: 1;
    flex: 1;
    font-size: 0
  }

  .ant-list-item-meta-avatar {
    margin-right: 16px
  }

  .ant-list-item-meta-content {
    -webkit-box-flex: 1;
    -ms-flex: 1 0;
    flex: 1 0
  }

  .ant-list-item-meta-title {
    color: rgba(0,0,0,.65);
    margin-bottom: 4px;
    font-size: 14px;
    line-height: 22px
  }

  .ant-list-item-meta-title>a {
    color: rgba(0,0,0,.65);
    -webkit-transition: all .3s;
    transition: all .3s
  }

  .ant-list-item-meta-title>a:hover {
    color: #1890ff
  }

  .ant-list-item-meta-description {
    color: rgba(0,0,0,.45);
    font-size: 14px;
    line-height: 22px
  }

  .ant-list-item-content {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-flex: 1;
    -ms-flex: 1;
    flex: 1;
    -webkit-box-pack: end;
    -ms-flex-pack: end;
    justify-content: flex-end
  }

  .ant-list-item-content-single {
    -webkit-box-pack: start;
    -ms-flex-pack: start;
    justify-content: flex-start
  }

  .ant-list-item-action {
    font-size: 0;
    -webkit-box-flex: 0;
    -ms-flex: 0 0 auto;
    flex: 0 0 auto;
    margin-left: 48px;
    padding: 0;
    list-style: none
  }

  .ant-list-item-action>li {
    display: inline-block;
    color: rgba(0,0,0,.45);
    cursor: pointer;
    padding: 0 8px;
    position: relative;
    font-size: 14px;
    line-height: 22px;
    text-align: center
  }

  .ant-list-item-action>li:first-child {
    padding-left: 0
  }

  .ant-list-item-action-split {
    background-color: #e8e8e8;
    margin-top: -7px;
    position: absolute;
    top: 50%;
    right: 0;
    width: 1px;
    height: 14px
  }

  .ant-list-item-main {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-flex: 1;
    -ms-flex: 1;
    flex: 1
  }
  .ant-spin-spinning {
    opacity: 1;
    position: static;
    display: inline-block
  }

  .ant-spin-nested-loading {
    position: relative
  }

  .ant-spin-nested-loading>div>.ant-spin {
    display: block;
    position: absolute;
    height: 100%;
    max-height: 400px;
    width: 100%;
    z-index: 4
  }

  .ant-spin-nested-loading>div>.ant-spin .ant-spin-dot {
    position: absolute;
    top: 50%;
    left: 50%;
    margin: -10px
  }

  .ant-spin-nested-loading>div>.ant-spin .ant-spin-text {
    position: absolute;
    top: 50%;
    width: 100%;
    padding-top: 5px;
    text-shadow: 0 1px 2px #fff
  }

  .ant-spin-nested-loading>div>.ant-spin.ant-spin-show-text .ant-spin-dot {
    margin-top: -20px
  }

  .ant-spin-nested-loading>div>.ant-spin-sm .ant-spin-dot {
    margin: -7px
  }

  .ant-spin-nested-loading>div>.ant-spin-sm .ant-spin-text {
    padding-top: 2px
  }

  .ant-spin-nested-loading>div>.ant-spin-sm.ant-spin-show-text .ant-spin-dot {
    margin-top: -17px
  }

  .ant-spin-nested-loading>div>.ant-spin-lg .ant-spin-dot {
    margin: -16px
  }

  .ant-spin-nested-loading>div>.ant-spin-lg .ant-spin-text {
    padding-top: 11px
  }

  .ant-spin-nested-loading>div>.ant-spin-lg.ant-spin-show-text .ant-spin-dot {
    margin-top: -26px
  }

  .ant-spin-container {
    position: relative;
    -webkit-transition: opacity .3s;
    transition: opacity .3s
  }

  .ant-spin-container:after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    background: #fff;
    opacity: 0;
    pointer-events: none;
    -webkit-transition: all .3s;
    transition: all .3s;
    display: none\9;
    height: 100%;
    width: 100%;
    z-index: 10
  }

  .ant-spin-blur {
    pointer-events: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    overflow: hidden;
    opacity: .5
  }

  .ant-spin-blur:after {
    opacity: .4;
    pointer-events: auto
  }

  .ant-list {
    font-family: Chinese Quote,-apple-system,BlinkMacSystemFont,Segoe UI,PingFang SC,Hiragino Sans GB,Microsoft YaHei,Helvetica Neue,Helvetica,Arial,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol;
    font-size: 14px;
    font-variant: tabular-nums;
    line-height: 1.5;
    color: rgba(0,0,0,.65);
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    list-style: none;
    position: relative
  }

  .ant-list * {
    outline: none
  }

  .ant-list-pagination {
    margin-top: 24px;
    text-align: right
  }

  .ant-list-more {
    margin-top: 12px;
    text-align: center
  }

  .ant-list-more button {
    padding-left: 32px;
    padding-right: 32px
  }

  .ant-list-spin {
    text-align: center;
    min-height: 40px
  }

  .ant-list-empty-text {
    color: rgba(0,0,0,.45);
    font-size: 14px;
    padding: 16px;
    text-align: center
  }

  .ant-list-item {
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    padding: 12px 0
  }

  .ant-list-item,.ant-list-item-meta {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex
  }

  .ant-list-item-meta {
    -webkit-box-align: start;
    -ms-flex-align: start;
    align-items: flex-start;
    -webkit-box-flex: 1;
    -ms-flex: 1;
    flex: 1;
    font-size: 0
  }

  .ant-list-item-meta-avatar {
    margin-right: 16px
  }

  .ant-list-item-meta-content {
    -webkit-box-flex: 1;
    -ms-flex: 1 0;
    flex: 1 0
  }

  .ant-list-item-meta-title {
    color: rgba(0,0,0,.65);
    margin-bottom: 4px;
    font-size: 14px;
    line-height: 22px
  }

  .ant-list-item-meta-title>a {
    color: rgba(0,0,0,.65);
    -webkit-transition: all .3s;
    transition: all .3s
  }

  .ant-list-item-meta-title>a:hover {
    color: #1890ff
  }

  .ant-list-item-meta-description {
    color: rgba(0,0,0,.45);
    font-size: 14px;
    line-height: 22px
  }

  .ant-list-item-content {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-flex: 1;
    -ms-flex: 1;
    flex: 1;
    -webkit-box-pack: end;
    -ms-flex-pack: end;
    justify-content: flex-end
  }

  .ant-list-item-content-single {
    -webkit-box-pack: start;
    -ms-flex-pack: start;
    justify-content: flex-start
  }

  .ant-list-item-action {
    font-size: 0;
    -webkit-box-flex: 0;
    -ms-flex: 0 0 auto;
    flex: 0 0 auto;
    margin-left: 48px;
    padding: 0;
    list-style: none
  }

  .ant-list-item-action>li {
    display: inline-block;
    color: rgba(0,0,0,.45);
    cursor: pointer;
    padding: 0 8px;
    position: relative;
    font-size: 14px;
    line-height: 22px;
    text-align: center
  }

  .ant-list-item-action>li:first-child {
    padding-left: 0
  }

  .ant-list-item-action-split {
    background-color: #e8e8e8;
    margin-top: -7px;
    position: absolute;
    top: 50%;
    right: 0;
    width: 1px;
    height: 14px
  }

  .ant-list-item-main {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-flex: 1;
    -ms-flex: 1;
    flex: 1
  }
  .ant-spin-spinning {
    opacity: 1;
    position: static;
    display: inline-block
  }

  .ant-spin-nested-loading {
    position: relative
  }

  .ant-spin-nested-loading>div>.ant-spin {
    display: block;
    position: absolute;
    height: 100%;
    max-height: 400px;
    width: 100%;
    z-index: 4
  }

  .ant-spin-nested-loading>div>.ant-spin .ant-spin-dot {
    position: absolute;
    top: 50%;
    left: 50%;
    margin: -10px
  }

  .ant-spin-nested-loading>div>.ant-spin .ant-spin-text {
    position: absolute;
    top: 50%;
    width: 100%;
    padding-top: 5px;
    text-shadow: 0 1px 2px #fff
  }

  .ant-spin-nested-loading>div>.ant-spin.ant-spin-show-text .ant-spin-dot {
    margin-top: -20px
  }

  .ant-spin-nested-loading>div>.ant-spin-sm .ant-spin-dot {
    margin: -7px
  }

  .ant-spin-nested-loading>div>.ant-spin-sm .ant-spin-text {
    padding-top: 2px
  }

  .ant-spin-nested-loading>div>.ant-spin-sm.ant-spin-show-text .ant-spin-dot {
    margin-top: -17px
  }

  .ant-spin-nested-loading>div>.ant-spin-lg .ant-spin-dot {
    margin: -16px
  }

  .ant-spin-nested-loading>div>.ant-spin-lg .ant-spin-text {
    padding-top: 11px
  }

  .ant-spin-nested-loading>div>.ant-spin-lg.ant-spin-show-text .ant-spin-dot {
    margin-top: -26px
  }

  .ant-spin-container {
    position: relative;
    -webkit-transition: opacity .3s;
    transition: opacity .3s
  }

  .ant-spin-container:after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    background: #fff;
    opacity: 0;
    pointer-events: none;
    -webkit-transition: all .3s;
    transition: all .3s;
    display: none\9;
    height: 100%;
    width: 100%;
    z-index: 10
  }

  .ant-spin-blur {
    pointer-events: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    overflow: hidden;
    opacity: .5
  }

  .ant-spin-blur:after {
    opacity: .4;
    pointer-events: auto
  }
  a {
    color: rgb(24, 144, 255);
    background-color: transparent;
    cursor: pointer;
    text-decoration: none;
    outline: none;
    transition: color 0.3s ease 0s;
  }
  a:active, a:hover {
    outline: 0px;
    text-decoration: none;
  }
  a:active {
    color: rgb(9, 109, 217);
  }
  .ant-modal-title {
    margin: 0;
    line-height: 22px;
    font-weight: 500;
    line-height: 24px;
    font-size: 18px;
    color: #303133;
  }
  .security-list-value {
    font-weight: bold;
  }
</style>
